import { Button, Modal, List, Message, Input } from '@arco-design/web-react';
import React, { useState, useEffect } from 'react';

type FavoriteItem = {
  title: string;
  content: string;
};

type PromptFavoritesProps = {
  value?: string;
  onChange?: (value: string) => void;
};

const PromptFavorites = ({ value, onChange }: PromptFavoritesProps) => {
  const [favorites, setFavorites] = useState<FavoriteItem[]>([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [titleModalVisible, setTitleModalVisible] = useState(false);
  const [titleInput, setTitleInput] = useState('');
  const [currentContent, setCurrentContent] = useState('');

  useEffect(() => {
    const saved = localStorage.getItem('promptFavorites');
    if (saved) {
      setFavorites(JSON.parse(saved));
    }
  }, []);

  const saveToFavorites = () => {
    if (!value) return;
    setCurrentContent(value);
    setTitleInput('');
    setTitleModalVisible(true);
  };

  const confirmSave = () => {
    if (!titleInput.trim()) {
      Message.error('请输入收藏标题');
      return;
    }
    const newFavorite = { title: titleInput, content: currentContent };
    const newFavorites = [...favorites, newFavorite];
    setFavorites(newFavorites);
    localStorage.setItem('promptFavorites', JSON.stringify(newFavorites));
    setTitleModalVisible(false);
    Message.success('已收藏提示词');
  };

  const applyFavorite = (fav: string) => {
    onChange?.(fav);
  };

  return (
    <>
      <Button.Group>
        <Button size="mini" type="text" onClick={() => setModalVisible(true)}>
        查看收藏
        </Button>
        <Button size="mini" type="primary" onClick={saveToFavorites}>
        收藏当前
        </Button>
      </Button.Group>
      
      <Modal
        title="收藏的提示词"
        visible={modalVisible}
        onOk={() => setModalVisible(false)}
        onCancel={() => setModalVisible(false)}
        footer={null}
        style={{ width: '80vw', maxWidth: '600px' }}
      >
        {favorites.length > 0 ? (
          <List
            bordered={false}
            dataSource={favorites}
            render={(item, index) => (
              <List.Item
                key={`fav-${index}`}
                extra={<Button.Group>
                  <Button 
                    size="mini"
                    key={`delete-${index}`}
                    type="text" 
                    status="danger"
                    onClick={() => {
                      const newFavorites = favorites.filter((_, i) => i !== index);
                      setFavorites(newFavorites);
                      localStorage.setItem('promptFavorites', JSON.stringify(newFavorites));
                      Message.success('已删除收藏');
                    }}
                  >
                    删除
                  </Button>

                  <Button 
                    size="mini"
                    key={`append-${index}`}
                    type="text" 
                    onClick={() => {
                      onChange?.(value ? `${value}, ${item.content}` : item.content);
                      setModalVisible(false);
                    }}
                  >
                    追加
                  </Button>
                  <Button 
                    size="mini"
                    key={`apply-${index}`}
                    type="text" 
                    onClick={() => {
                      applyFavorite(item.content);
                      setModalVisible(false);
                    }}
                  >
                    应用
                  </Button>
                </Button.Group>}
              >
                {item.title}
              </List.Item>
            )}
          />
        ) : (
          <div>暂无收藏</div>
        )}
      </Modal>

      <Modal
        title="设置收藏标题"
        visible={titleModalVisible}
        onOk={confirmSave}
        onCancel={() => setTitleModalVisible(false)}
        style={{ width: '80vw', maxWidth: '600px' }}
        
      >
        <Input 
          value={titleInput}
          onChange={setTitleInput}
          placeholder="请输入收藏标题"
        />
      </Modal>
    </>
  );
};

export default PromptFavorites;
